<template>
  <div class="home">
    <!-- <div class="header">
      <img :src="src" alt class="head-icon head-search">
      <h2 class="head-zaowu">ZAOWU 造物</h2>
      <div class="head-icons">
        <img :src="require('@/assets/imgs/icons/chat.png')" alt class="head-icon head-chat">
        <router-link class="head-icon head-cart" tag="img" :src="require('@/assets/imgs/icons/cart.png')"  to="/cart/:goodsMsg"></router-link>
      </div>
    </div> -->

    <headerBar :srcSearch="srcSearch" :title="title" :srcChat="srcChat"></headerBar>
    <div class="section section-banner">
      <div class="ban-tbs">
        <div class="ban-tbs-btn">推荐</div>
        <div class="ban-tbs-btn">活动</div>
        <div class="ban-tbs-btn">品牌</div>
        <div class="ban-tbs-btn">定制</div>
      </div>
      <swiper
        class="bannerMySwiper"
        :options="bannerSwiperOption"
        ref="mySwiper"
        @someSwiperEvent="callback"
      >
        <swiper-slide v-for="MondayImg in MondayImgs" :key = "MondayImg.id">
          <img :src="MondayImg.url" alt="">
        </swiper-slide>
      </swiper>
    </div>
    <div class="cut-off"></div>
    <!-- 调用组件 -->
    <div class="main-bar">
      <commonWeek :titleWeek="weekTwo" :titleDate="titleTue"></commonWeek>
      <img :src="require('@/assets/imgs/home/bg1.png')" alt class="main-bg">
      <ul class="main-goods">
        <li class="main-goods-item">
          <img :src="require('@/assets/imgs/home/p12.png')" alt>
          <p>精油香氛</p>
          <p>¥ 399</p>
        </li>
        <li class="main-goods-item">
          <img :src="require('@/assets/imgs/home/p9.png')" alt>
          <p>精油香氛</p>
          <p>¥ 399</p>
        </li>
        <li class="main-goods-item">
          <img :src="require('@/assets/imgs/home/p10.png')" alt>
          <p>精油香氛</p>
          <p>¥ 399</p>
        </li>
        <li class="main-goods-item">
          <img :src="require('@/assets/imgs/home/p11.png')" alt>
          <p>精油香氛</p>
          <p>¥ 399</p>
        </li>
      </ul>
      <div class="monday-goods">
        <commonWeek :titleWeek="weekOne" :titleDate="titleMon"></commonWeek>
        <mondaygoods></mondaygoods>
      </div>
    </div>
    <div class="msak"></div>
  </div>
</template>
<script>
import homeApi from "@/api/home/home.js";
//引入组件
import commonWeek from "./components/CommonWeek";
import headerBar from "@/components/HeaderBar";

import mondaygoods from "./components/MondayGoods";

//swipew 轮播
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "Home",

  data() {
    return {
      srcSearch: require('@/assets/imgs/icons/search.png'),
      srcChat: require('@/assets/imgs/icons/chat.png'),
      title: "ZAOWU 造物",
      titleTue: "TUE 9.18",
      weekTwo: "周二品质生活专题",
      titleMon: "MON 9.17",
      weekOne: "周一新品抢先放送",
      bannerSwiperOption: {
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
        // ...
        slidesPerView: 1.3,
        centeredSlides: true
      },
      MondayImgs:[]
    };
  },
  components: {
    headerBar,
    swiper,
    swiperSlide,
    //记得在这里注册组件
    mondaygoods,
    commonWeek
  },
  created(){
    this.getMondayImgs()
  },
  methods: {
    callback() {},
    getMondayImgs(){
      homeApi.getMonddayImgs()
      .then(res=>{
        //res返回的结果 数据
        this.MondayImgs = res
      })
    }
  },
  beforeCreate() {
    var mask = document.getElementsByClassName(".mask")[0];

    console.log(mask);

    //表示实例对象被创建之前,触发,执行的时候,data和methods中的数据还没有初始化出来
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/commin.scss";
.home {
  .msak {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: pink;
    display: none;
  }
  .header {
    display: flex;
    padding: 0 $basPadding;
    justify-content: space-between;
    align-items: center;
    // background-color: pink;
    margin-bottom: 13.5px;
    width: 100%;
    height: 28px;
    .head-zaowu {
      font-size: 20px;
      color: #000;
      padding-left: 20px;
    }
    .head-icons {
      .head-chat {
        // padding-right: 20px;
        // margin-right: 20px;
        margin-right: 20px;
      }
    }
    .head-icon {
      width: 20px;
      height: 20px;
    }
    .head-search {
    }
  }
  .section {
    .bannerMySwiper {
      height: 394px;
    }
    .ban-tbs {
      widows: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
      .ban-tbs-btn {
        padding: 0 15px;
        border-right: 1px solid #e5e5e5;
        color: #010e0d;
        font-size: 15px;
        &:last-child {
          border-right: none;
        }
      }
    }
  }
  .cut-off {
    width: 100%;
    height: 5px;
    background-color: #f9f9f9;
    margin-bottom: 16px;
  }
  .main-bar {
    .main-bg {
      margin-top: 9px;
      margin-bottom: 24px;
    }
    .main-goods {
      margin-bottom: 30px;
      display: flex;
      justify-content: space-between;
      padding: 0 $basPadding;
    }
  }
}
</style>


